﻿<!DOCTYPE html>
<!--岗位安全考核模板编辑-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
    <style>
        /*说明：
         由于mystyle.css中162行.el-form-item__content {line-height: normal!important;}导致的
         index.css中.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label{    line-height: 28px;}失效
         但出于无法修改样式表的情况，所以在该页面添加以下样式，以保证页面内标题和内容不偏离
        */
        .el-form-item--mini .el-form-item__content,
        .el-form-item--mini .el-form-item__label {
            line-height: 28px !important;
        }

        .el-dialog__body {
            height: 200px !important;
        }
    </style>
    <style>

        .el-input__suffix {
            /* z-index: 9; */
        }

        .cell {
            text-align: center;
        }
    </style>
    <style>
        /*页面内弹窗导致function.js的响应式样式失效，懒得调了，单独写个死样式控制select的样式，勉强能用*/
        .input-with-select .el-input-group__append {
            background-color: #fff;
        }

        .el-input__inner {
           
            padding: 0px;
            margin: 0px;
            border-right: none;
        }

        .el-input--suffix .el-input__inner {
           
            padding-left: 30px;
        }

        .el-input-group__append {
            width: 100%;
        }
        .el-table .el-input__inner {
            height: 28px;
            line-height: 28px;
        }

        .widthZ {
            background-color: #FFF;
        }

            .widthZ .el-input__inner {
                width: 0px !important;
                display: initial;
                border-color: #FFF;
            }
            .widthZ .el-input-group__prepend {
            width: 124px !important;
        }

            .widthZ .el-select {
                width: 100% !important;
                margin: 0px !important;
            }

            .widthZ .el-input-group__append {
                
                background-color: #FFF;
                width: 80% !important;
                display: inline;
                float: left;
                border: 1px solid #ddd;
            }

            .widthZ .el-select .el-input__inner {
                width: 100% !important;
            }
    </style>
</head>
<body>
    
<div id="app" class="popupW100" v-cloak>   
    <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" label-position="right">


        <el-row>
            <el-col :span="11">
                <div class="elst-select-mini">
                    <el-form-item>
                        <!--{{Form.postName}}-->
                        <el-input class="input-with-select widthZ" size="mini">
                            <template slot="prepend">
                                <div> {{PostSafeAssessmentTemplateTable.postName+mark.m}}</div>
                            </template>
                            <el-select @visible-change="visibleChange" v-model="dutyId" slot="append" placeholder="请选择" @change="postChange">
                                <el-option label="请选择" value=""></el-option>
                                <el-option v-for="item in duties" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="11" offset="2">
                <div class="elst-select-mini">
                    <el-form-item>
                        <el-input size="mini">
                            <template slot="prepend">
                                {{'选择部门'+mark.m}}
                            </template>
                            <treeselect v-model="departmentId" :options="department" :flat="true"
                                        slot="suffix" placeholder="请选择"
                                        style="line-height: 28px;" />
                        </el-input>
                    </el-form-item>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="elst-select-mini">
                    <el-form-item>
                        <div class="el-input--mini el-input-group">
                            <div class="el-input-group__prepend">
                                {{PostSafeResponsibilityExamineManager.postSafeProductionScope+mark.m}}
                            </div>
                            <el-input class="el-textarea__inner" type="textarea" v-model="Form.postSafeProductionContent"
                                      autocomplete="off"></el-input>
                        </div>
                    </el-form-item>
                </div>
            </el-col>

        </el-row>

        <el-row style="margin-bottom:10px;">
            <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="6">
                <el-button type="primary" @click="showDialog">新增考核内容</el-button>
            </el-col>
        </el-row>
        <!--下方表格-->
        <el-table ref="table"
                  :data="Form.tableData"
                  :row-key="getRowKeys"
                  border
                  @selection-change="handleSelectionChange"
                  row-style="height:10px"
                  style="width: 100%;">
            <!--第一列【序号】-->
            <el-table-column type="index" :label="PostSafeAssessmentTemplateTable.id" :index="indexMethod" width="50" show-overflow-tooltip="true"></el-table-column>
            <!--第二列【岗位安全生产责任内容】-->
            <el-table-column prop="postSafeProductionContent" :label="PostSafeAssessmentTemplateTable.postSafeProductionContent" show-overflow-tooltip="true">
            </el-table-column>
            <!--第三列【考核内容】-->
            <el-table-column prop="assessmentContent" :label="PostSafeAssessmentTemplateTable.assessmentContent" show-overflow-tooltip="true">
            </el-table-column>
            <!--<el-table-column prop="id" :label="PostSafeAssessmentTemplateTable.assessmentContent" show-overflow-tooltip="true">
        </el-table-column>-->
            <!--<el-table-column prop="id" :label="PostSafeAssessmentTemplateTable.id" v-if=""  show-overflow-tooltip="true">
        </el-table-column>-->
            <!--第四列【权重分】-->
            <el-table-column prop="weightScore" :label="PostSafeAssessmentTemplateTable.weightScore" show-overflow-tooltip="true" width="120">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.weightScore" placeholder="权重分" class="weightScore"></el-input>
                </template>
            </el-table-column>
            <el-table-column width="70" prop="update" :label="col.btnDelete" fixed="right">
                <template slot-scope="scope">
                    <!--<button type="button" class="elst-bt-xg" @click=UserInput('xg',scope.row.id)>
                    <i class="el-icon-edit"></i>
                </button>-->
                    <el-button type="danger" @click="onDelete(scope.row.id,scope.$index)">{{col.btnDelete}}</el-button>
                </template>
            </el-table-column>
        </el-table>



        <el-row type="flex" justify="end" style="margin-top:20px;">
            <el-form-item>
                <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>-->
                <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>
                <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
            </el-form-item>
        </el-row>


        <el-dialog title="新增考核内容" fullscreen="true" :visible.sync="ListItem.dialogVisible" @close='closeDialog' top="15vh" :height="70">
            <el-form size="mini" label-position="right">
                <el-row>
                    <el-col :span="11">
                        <div class="elst-select-mini">
                            <el-form-item :label="PostSafeAssessmentTemplateTable.postName+mark.m" class="inputTextarea">
                                {{Form.postName}}
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="24">
                        <div class="elst-select-mini">
                            <el-form-item>
                                <div class="el-input--mini el-input-group">
                                    <div class="el-input-group__prepend">
                                        {{PostSafeAssessmentTemplateTable.postSafeProductionContent+mark.m}}
                                    </div>
                                    <el-input class="el-textarea__inner" type="textarea" v-model="tj.t1"
                                              autocomplete="off"></el-input>

                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="elst-select-mini">
                            <el-form-item>
                                <div class="el-input--mini el-input-group">
                                    <div class="el-input-group__prepend">
                                        {{PostSafeAssessmentTemplateTable.assessmentContent+mark.m}}
                                    </div>
                                    <el-input class="el-textarea__inner" type="textarea" v-model="tj.t2"
                                              autocomplete="off"></el-input>

                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDialog('ruleForm')">{{col.btnSave}}</el-button>
                <el-button type="primary" @click="ListItem.dialogVisible = false">{{col.btnBack}}</el-button>
            </div>
        </el-dialog>
    </el-form>

    </div>
    <script type="text/javascript">
        app = new Vue({
            el: '#app',
            data: {
                tempId: guidEmpty,
                //父业传参
                id: '',
                //业务表单内容
                Form: {
                    id: guidEmpty,
                    postID: '',//职务
                    postID2:'',//部门
                    //postName: '',
                    postSafeProductionContent: '',
                    //assessmentContent: '',
                    tableData: [],
                    jG_JobsAssessTemplateDetail:[]
                },
                delId:[],
                //职务数据集
                duties: [],
                //职务model
                dutyId: null,
                //部门数据集
                department: [],
                departmentId: null,
                tj: {
                    t1: '',
                    t2: '',},
                post: [],
                ListItem: ListItem,
                //表单验证
                rules: {

                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //表格序号连续化
                indexMethod: function (index) { return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1; },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    var sumS = 0;
                    if (mythis.Form.postSafeProductionContent == null || mythis.Form.postSafeProductionContent == "" || mythis.Form.postSafeProductionContent == undefined) {
                        alert('请输入岗位安全生产责任范围！');
                        return false;
                    }
                    for (var i = 0; i < mythis.Form.tableData.length; i++) {
                        sumS = parseFloat(sumS) + parseFloat(mythis.Form.tableData[i].weightScore);
                        if (parseInt(mythis.Form.tableData[i].weightScore) <= 0) {
                            alert('权重分不能小于等于0！');
                            return false;
                        }
                    }
                    if (parseFloat(sumS) == 100) {
                        this.$refs[formName].validate(function (valid) {
                            //验证通过
                            if (valid) {
                                mythis.Form.postID2 = mythis.departmentId;
                                mythis.Form.postID = mythis.Form.post;
                                //mythis.Form.postSafeProductionContent = mythis.Form.postName
                                mythis.Form.jG_JobsAssessTemplateDetail= mythis.Form.tableData
                                console.log('mythis.Form', mythis.Form)
                                if (mythis.delId.length > 0) {
                                    myAjax("post", mythis, '/api/JG_JobsAssessTemplateDetail/DeleteMuti', mythis.delId, function (response) {

                                    });
                                }
                                onSubmitForm(this, '/api/JG_JobsAssessTemplate/Save', mythis.Form);
                               
                            } else {
                                //验证失败
                                return false;
                            }
                        });
                    } else {
                        alert('权重分综合为100！');
                        return false;
                    }

                },
                getData: function () {
                    //getData(this, '/api/JG_JobsAssessTemplate/get?id=' + this.id);
                    //console.log('form', this.Form)
                    
                    var mythis = this; mythis.delId = [];
                    if (mythis.id == null || mythis.id == "" || mythis.id == undefined) { } else {
                        myAjax("post", this, '/api/JG_JobsAssessTemplate/get', { model: { postID: this.id }, offset: 0, limit: 10 }, function (response) {
                            if (response.data.pageData.length == 0) {
                                mythis.Form.tableData = [];

                            } else {
                                mythis.Form.id = response.data.pageData[0].id;
                                mythis.Form.post = response.data.pageData[0].postID;
                                mythis.dutyId = response.data.pageData[0].postID;
                                mythis.Form.postName = response.data.pageData[0].sysDuty.name;
                                mythis.departmentId = response.data.pageData[0].postID2;
                                mythis.Form.postID = response.data.pageData[0].postID;
                                mythis.Form.postSafeProductionContent = response.data.pageData[0].postSafeProductionContent;
                                mythis.Form.tableData = response.data.pageData[0].jG_JobsAssessTemplateDetail

                            }
                        }, false);
                        if (mythis.Form.post == null || mythis.Form.post == "" || mythis.Form.post == undefined) { } else {
                            myAjax("get", this, '/api/JG_JobsAssess/GetDepartmentId?dutyID=' + mythis.Form.post, {}, function (response) {
                                if (response.data.length == 0) {
                                    mythis.departmentId = null;
                                } else {
                                    mythis.departmentId = response.data;

                                }
                            }, false);
                        }
                    }
                },
                postChange: function (val) {
                    this.id=val;
                    var mythis = this;
                    mythis.Form.post = val;
                    myAjax("post", this, '/api/JG_JobsAssessTemplate/get', { model: { postID: this.id }, offset: 0, limit: 10 }, function (response) {
                        if (response.data.pageData.length == 0) {
                            mythis.Form.tableData = [];

                        } else {
                            mythis.Form.id = response.data.pageData[0].id;
                            mythis.Form.tableData = response.data.pageData[0].jG_JobsAssessTemplateDetail

                        }
                    }, false);
                    if (mythis.Form.post == null || mythis.Form.post == "" || mythis.Form.post == undefined) { } else {
                        myAjax("get", this, '/api/JG_JobsAssess/GetDepartmentId?dutyID=' + mythis.Form.post, {}, function (response) {
                            if (response.data.length == 0) {
                                mythis.departmentId = null;
                            } else {
                                mythis.departmentId = response.data;

                            }
                        }, false);
                    }
                },
                showDialog: function () {
                    this.tj.t1 = '';
                    this.tj.t2 = '';
                    this.ListItem.dialogVisible = true;
                },
                closeDialog: function () {

                },
                submitDialog: function () {
                    var mythis = this;
                    var list = this.Form.tableData;
                    if (list) {
                        list.unshift({
                            id: guidEmpty,//id
                            postSafeProductionContent: mythis.tj.t1,
                            assessmentContent: mythis.tj.t2,
                            weightScore: 0,
                            post: mythis.id
                        })
                    }
                    this.ListItem.dialogVisible = false;
                },
                onDelete: function (id,delrow) {
                    var mythis = this;
                    //this.$confirm(' 是否确认继续?', '提示', {
                    //    confirmButtonText: '确定',
                    //    cancelButtonText: '取消',
                    //    type: 'warning'
                    //}).then(function () {
                    if (id == mythis.tempId || id == null || id == "") {
                        this.$confirm(' 是否确认继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            var list = mythis.Form.tableData;
                            list.splice(delrow, 1);
                        }).catch(function () {
                            showMessage("已取消删除!");
                        });
                    } else {
                        this.$confirm(' 是否确认继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            mythis.delId.push(id);
                            //myAjax("post", mythis, '/api/JG_JobsAssessTemplateDetail/DeleteMuti', id, function (response) {
                            //    var list = mythis.Form.tableData;
                            //    list.splice(delrow, 1);

                            //    showMessage(msg.OperatingOk, "success");
                            //});
                            var list = mythis.Form.tableData;
                            list.splice(delrow, 1);
                        }).catch(function () {
                            showMessage("已取消删除!");
                        });
                    }
                        
                       
                    //}).catch(function () {
                    //    showMessage("已取消删除!");
                    //});
                },
                //初始化部门下拉树(完成)
                getDepartmentData: function () {
                    var mythis = this;
                   
                    myAjax("post", this, '/api/SysDepartment/GetList', { model: { Name: '', Code: '', CreateFactory: null }, offset: 0, limit: 10 }, function (response) {
                        mythis.department = menuHelper(response.data.pageData, guidEmpty)
                    }, false);
                    

                },
                getSysDuty: function () {
                    var mythis = this;
                    myAjax("post", this, '/api/SysDuty/GetList', { model: { Name: '', CreateFactory: null }, offset: 0, limit: 10 }, function (response) {
                        mythis.duties = menuHelper(response.data.pageData, guidEmpty)
                    }, false);
                },
            },
            mounted: function () {
                this.Form = {};
                //this.post = getDicData('postname');
                this.getDepartmentData();
                this.id = getUrlParam("id");
                if (this.id == null || this.id == "" || this.id == undefined || this.id == "undefined") {
                    this.id = "";
                    this.Form.post = "";
                    this.dutyId = "";
                    this.Form.postName = "";
                    this.departmentId = null;
                } else {
                    this.Form.post = getUrlParam("id");
                    this.dutyId = getUrlParam("id");
                    this.Form.postName = getQueryString("postName");
                    this.departmentId = getUrlParam("departmentId");
                }
                this.Form.t1 = '';
                this.Form.t2 = '';
                this.getSysDuty();
                this.getData();
                
                //if (this.Form.tableData) {
                //    this.Form.postName = getDicValue('postname', this.Form.tableData[0].post)
                //}
                //列表高度自适应
                tablehigh(this);
            }
        });
        function getQueryString(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var result = window.location.search.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : null;
        }
        //下拉树数据格式化
        function menuHelper(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelper(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
    </script>
</body>

</html>